<script>
export default {
  name: "AsyncData",
};
</script>
<script setup>
import { onMounted, ref, shallowRef } from "vue";
import * as echarts from "echarts/core";

import { useEchartsResizeAndDestory } from "../hooks/EchartsResizeAndDestoryHooks";

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
// 图表配置
const data = {
  categories: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  values: [
    randomData(),
    randomData(),
    randomData(),
    randomData(),
    randomData(),
    randomData(),
  ],
};
const option = {
  title: {
    text: "静态数据加载示例",
  },
  tooltip: {},
  legend: {
    data: ["销量"],
  },
  xAxis: {
    data: data.categories,
  },
  yAxis: {},
  series: [
    {
      name: "销量",
      type: "bar",
      data: data.values,
    },
  ],
};

onMounted(() => {
  init();
});

const echartsContainerRef = ref();
const chartInstance = shallowRef();

useEchartsResizeAndDestory(chartInstance, echartsContainerRef);

function init() {
  chartInit();
}
// 初始化
function chartInit() {
  const echartsContainer = echartsContainerRef.value;
  if (!echartsContainer) return;

  chartInstance.value = echarts.init(echartsContainer);
  chartInstance.value.setOption(option);
}

function randomData() {
  return Math.ceil(Math.random() * 100);
}
</script>

<template>
  <div class="h-80 w-full flex flex-col">
    <div
      ref="echartsContainerRef"
      v-loading="dataLoading"
      class="flex-1 h-0"
    ></div>
  </div>
</template>

<style scoped></style>
